<template>
  <div class="empty">
    <image class="empty-img" :src="img" />
    <view class="empty-title" v-if="title">{{ title }}</view>
    <view class="empty-text" v-if="text">{{ text }}</view>

    <view class="handle-view" v-if="$slots.handle">
      <slot name="handle" />
    </view>
    <view class="handle-view" v-else>
      <template v-for="(handle, index) in handles" :key="index">
        <button v-if="handle.text" :class="['handle', `handle-${handle.type}`]" @click="handle.event">{{ handle.text
        }}</button>
      </template>
    </view>
  </div>
</template>

<script>
export default {
  name: 'Empty',
  props: {
    img: String,
    title: String,
    text: String,

    /**
     * @property {String} type - confirm, cancel
     * @property {String} text
     * @property {Function} event
     */
    handles: {
      type: Array,
      default: () => []
    }
  },
  setup () {
  }
}
</script>

<style lang="scss" scoped>
.empty {
  padding-top: 144rpx;
  text-align: center;

  .empty-img {
    width: 300rpx;
    height: 300rpx;
    display: block;
    margin: 0 auto;
    // background: #d8d8d8;
  }

  .empty-title {
    margin-top: 16rpx;
    font-size: 30rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #333333;
    line-height: 32rpx;
  }

  .empty-text {
    margin-top: 16rpx;
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #cccccc;
    line-height: 32rpx;
  }

  .handle-view {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48rpx;

    .handle-cancel {
      width: 136rpx;
      height: 60rpx;
      line-height: 58rpx;
      border: 1px solid #cccccc;
      border-radius: 50rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #2b2b2b;
    }

    .handle-confirm {
      width: 150rpx;
      height: 60rpx;
      line-height: 58rpx;
      margin: 40rpx auto 0;
      border: 1px solid #D82E31;
      border-radius: 31rpx;
      font-size: 24rpx;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #D82E31;
    }
  }
}
</style>
